<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>POS</title>
		<style>
		body{
			margin: 0px;
			padding: 0px;
			background-color: #e6e6fa;
		}

		.shadow{
			-moz-box-shadow: 3px 3px 4px #aaa;
			-webkit-box-shadow: 3px 3px 4px #aaa;
			box-shadow: 3px 3px 4px #aaa; /* For IE 8 */
    		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#aaaaaa')"; /* For IE 5.5 - 7 */
			filter: progid:DXImageTransform.Microsoft.Shadow(Strength = 4, Direction = 135, Color = '#aaaaaa');
		}

		#main{
			min-width: 800px;
			min-height: 480px;
			margin: 0px auto;
			/*background-color: blue;*/
		}

		#content{
			float: left;
			width: 50%;
			/*background-color: orange;*/
			text-align: right;
		}

		#list{
			float: left;
			width: 30%;
			min-width: 150px;
			/*background-color: green;*/
		}

		#menu{
			float: right;
			width: 20%;
			/*background-color: gray;*/
		}

		#footer{
			clear: both;
			height: 50px;
			line-height: 50px;
			width: 100%;
			background-color: #333333;
			vertical-align: middle;
			font-size: 14pt;
			font-weight: bolder;
			color: white;
		}

		#footer img{
			padding: 4px;
			border: 1px solid black;
			background-color: white;
			float: left;
			margin-right: 10px;
		}

		.button{
			float: left;
			background-color: red;
			border: none;
			margin: 4px;
			cursor: pointer;
			border-radius: 4px;
			min-width: 100px;
			min-height: 58px;
			/*background: #ccc url('hambi.png') center center no-repeat;*/
			background-color: #ccc;
			text-align: center;
			font-weight: bold;
		}

		.button img{
			/*max-height: 70%;*/
			max-width: 70%;
			display: block;
			margin: 0px auto;
			/*border: 1px solid black;*/
		}

		.button3,
		.button2{
			background-color: red;
			border: none;
			cursor: pointer;
			min-width: 100px;
			min-height: 30px;
			margin: 8px;
			border-radius: 4px;
			background-color: #ccc;
			vertical-align: middle;
			font-weight: bolder;
			text-align: left;
		}

		.button3 img,
		.button2 img{
			max-height: 80%;
			max-width: 80%;
			vertical-align: middle;
			margin-right: 10px;
		}

		.button3 div,
		.button2 div{
			text-align: center;
		}

		#items{
			text-align: center;
			border: 1px solid black;
			background-color: white;
			margin: 5px;
			padding: 5px;
			color: black;
			overflow-y: auto;
			border-radius: 4px;
		}
		</style>
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.10.1.custom.js"></script>
		<script type="text/javascript">
			function setSize(){
				var fh = 50;
				$('#main').css({'height' : $(window).height()}); //jo
				$('#content').css({'height' : $("#main").height()-fh}); //jo
				$('#list').css({'height' : $("#main").height()-fh}); //jo
				$('#menu').css({'height' : $("#main").height()-fh}); //jo
				$('.button').css({'height' : $('#content').height()*0.14, 'width' : $('#content').width()*0.14}); //jo
				if($('.button').height()===58){
					$('.button img').css({'max-height' : '60%'});
				}
				else{
					$('.button img').css({'max-height' : '70%'});
				}
				$('.button2').css({'height' : $('#list').height()*0.10, 'width' : $('#list').width()-16}); //jo
				$('.button3').css({'height' : $('#menu').height()*0.10, 'width' : $('#menu').width()-16}); //jo
				$('#items').css({'height' : $('#list').height()*0.6});//*/
			}

			$(window).ready(function(){
				setSize();
			});

			$(window).resize(function(){
				setSize();
			});
		</script>
	</head>

	<body>
		<div id="main">
			<!--<div id="content">
				<button class="button shadow" onClick="$('#items').append('Hamburger, ');"><img src="hambi.png">Hamburger</button>
				<button class="button shadow" onClick="$('#items').append('Gomb2, ');"><img src="hambi.jpg">Gomb2</button>
				<button class="button shadow" onClick="$('#items').append('Gomb3, ');"><img src="hambi.png">Gomb3</button>
				<button class="button shadow" onClick="$('#items').append('Gomb4, ');"><img src="hambi.jpg">Gomb4</button>
				<button class="button shadow" onClick="$('#items').append('Gomb5, ');"><img src="hambi.png">Gomb5</button>
				<button class="button shadow" onClick="$('#items').append('Gomb6, ');"><img src="hambi.jpg">Gomb6</button>
			</div>-->
			<div id="list">
				<!--<div id="items"></div>-->
				<div>
					<button class="button2 shadow"><img src="hambi.png">Visszavonás</button>
					<button class="button2 shadow"><img src="hambi.png">Vásárlás</button>
				</div>
			</div>
			
			<div id="menu">
				<button class="button3 shadow"><img src="hambi.png">Beállítások</button>
				<button class="button3 shadow"><img src="hambi.png">Gomb0</button>
			</div>
			
			<div id="footer">
				<img src="" width="40" height="40">
				<span>Ablak Zsiráf</span>
			</div>
		</div>
	</body>
</html>